<template>
  <div class="adminConfig h100">
    <div class="formContent">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="180px"
        class="demo-ruleForm"
      >
        <!-- <el-form-item label="商品是否收费" prop="asCostSpu">
          <el-radio-group v-model="ruleForm.asCostSpu">
            <el-radio :label="0">不收费</el-radio>
            <el-radio :label="1">收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="祭扫是否收费" prop="asSacrificeTomb">
          <el-radio-group v-model="ruleForm.asSacrificeTomb">
            <el-radio :label="0">不收费</el-radio>
            <el-radio :label="1">收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.asSacrificeTomb"
          label="价格"
          prop="sacrificePrice"
        >
          <el-input
            v-model="ruleForm.sacrificePrice"
            placeholder="请输入价格"
            @blur="moneyType(ruleForm.sacrificePrice)"
          ></el-input>
        </el-form-item>
        <el-form-item label="祈福树是否收费" prop="asBlessingTree">
          <el-radio-group v-model="ruleForm.asBlessingTree">
            <el-radio :label="0">不收费</el-radio>
            <el-radio :label="1">收费</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="是否开启 预约祭扫" prop="asOpenSacrificeTomb">
          <el-radio-group v-model="ruleForm.asOpenSacrificeTomb">
            <el-radio :label="0">不开启</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否开启 代祭扫" prop="asOpenReplaceSacrifice">
          <el-radio-group v-model="ruleForm.asOpenReplaceSacrifice">
            <el-radio :label="0">不开启</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="客服电话" prop="servicePhone">
          <el-input
            v-model="ruleForm.servicePhone"
            placeholder="请输入客服电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="最大随从人数" prop="maxAttendNum">
          <el-input
            v-model.number="ruleForm.maxAttendNum"
            placeholder="请输入最大随从人数"
          ></el-input>
        </el-form-item>
        <el-form-item label="预约截止天数" prop="appointmentEndNum">
          <el-input
            v-model.number="ruleForm.appointmentEndNum"
            placeholder="请输入截止天数"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="免费商品最大使用次数" prop="freeCount">
          <el-input v-model.number="ruleForm.freeCount" placeholder="请输入免费商品最大使用次数"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="预约祭扫配置" prop="appointmentSacrificeConfig">
          <el-select
            v-model="ruleForm.appointmentSacrificeConfig"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="充值说明" prop="payIntroduct">
          <el-input
            type="textarea"
            v-model="ruleForm.payIntroduct"
            placeholder="充值说明"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">立即保存</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  configuration_loadList,
  configuration_operation,
  configuration_loadOne,
  configuration_delete
} from "@/api/adminConfig/index";

export default {
  name: "adminConfig",
  data() {
    // // 手机号验证
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(""));
      } else {
        var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
        var isMob = /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
        console.log(
          value,
          isMob.test(value),
          isPhone.test(value),
          isMob.test(value) || isPhone.test(value)
        );
        if (isMob.test(value) || isPhone.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的手机号或固话号码"));
        }
      }
    };
    const isNumber = (rule, value, callback) => {
      if (!Number.isInteger(+value)) {
        callback(new Error("请输入数字值"));
      } else {
        callback();
      }
    };
    return {
      options: [
        {
          value: 0,
          label: "绑定公墓"
        },
        {
          value: 1,
          label: "填写"
        },
        {
          value: 2,
          label: "全部"
        }
      ],
      ruleForm: {
        asCostSpu: 0,
        asSacrificeTomb: 0,
        sacrificePrice: 0,
        asBlessingTree: 0,
        asOpenSacrificeTomb: 0,
        asOpenReplaceSacrifice: 0,
        servicePhone: "",
        maxAttendNum: "",
        appointmentEndNum: "",
        appointmentSacrificeConfig: 1,
        freeCount: "",
        payIntroduct: ""
      },
      rules: {
        asCostSpu: [
          { required: true, message: "请选择商品是否收费", trigger: "change" }
        ],
        asSacrificeTomb: [
          { required: true, message: "请选择祭扫是否收费", trigger: "change" }
        ],
        sacrificePrice: [
          { required: true, message: "请输入价格", trigger: "blur" }
          // { type: "number", message: "请输入数字值", trigger: "blur" },
          // { validator: isNumber, trigger: "change" }
        ],
        asBlessingTree: [
          { required: true, message: "请选择祈福树是否收费", trigger: "change" }
        ],
        asOpenSacrificeTomb: [
          {
            required: true,
            message: "请选择预约祭扫是否开启",
            trigger: "change"
          }
        ],
        asOpenReplaceSacrifice: [
          {
            required: true,
            message: "请选择预约代祭扫是否开启",
            trigger: "change"
          }
        ],
        servicePhone: [
          {
            // 客服电话验证
            required: true,
            validator: validatePhone,
            message: "请输入手机号",
            trigger: "blur"
          }
        ],
        maxAttendNum: [
          { required: true, message: "请输入最大随从人数", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
          { validator: isNumber, trigger: "change" }
        ],
        // freeCount: [
        //   {
        //     required: true,
        //     message: "请输入免费商品最大使用次数",
        //     trigger: "blur"
        //   },
        //   { type: "number", message: "请输入数字", trigger: "blur" },
        //   { validator: isNumber, trigger: "change" }
        // ],
        appointmentEndNum: [
          { required: true, message: "请输入截止天数", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
          { validator: isNumber, trigger: "change" }
        ],
        appointmentSacrificeConfig: [
          {
            required: true,
            message: "请选择预约祭扫配置",
            trigger: "change"
          }
        ]
      }
    };
  },
  watch: {
    "select.phone": function(curVal, oldVal) {
      if (!curVal) {
        this.select.phone = "";
        return false;
      }
      // 实时把非数字的输入过滤掉
      this.select.phone = curVal.match(/\d/gi)
        ? curVal.match(/\d/gi).join("")
        : "";
    }
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    async onLoad() {
      this.loading = true;
      let postData = {};
      console.log(postData, "postData");
      try {
        const res = await configuration_loadList(postData);
        this.loading = false;
        console.log(res, 200);
        if (res.code != "2000") {
          this.$message.error(res.msg ? res.msg : "信息获取失败");
          return;
        }
        if (res.data.length == 0) {
          this.$message("没有全局配置信息");
          return;
        }
        this.$message.success("数据加载成功");
        if (res.data && res.data.length >= 0) {
          this.ruleForm = res.data[res.data.length - 1];
        }
      } catch (err) {
        this.loading = false;
        console.log(err, 404);
        this.$message.error(err.msg);
      }
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate(valid => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    submitForm() {
      this.$refs["ruleForm"].validate(async valid => {
        if (valid) {
          this.loading = true;
          let postData = this.ruleForm;
          console.log(postData, "postData");
          try {
            const res = await configuration_operation(postData);
            this.loading = false;
            console.log(res, 200);
            if (res.code != 2000) {
              this.$message.error(res.msg ? res.msg : "修改失败");
              return;
            }
            this.$message.success("修改成功");
            if (res.data && res.data.length >= 0) {
              this.ruleForm = res.data[res.data.length - 1];
            }
          } catch (err) {
            this.loading = false;
            console.log(err, 404);
            this.$message.error(err.msg);
          }
        }
      });
    },
    // 金额数据处理
    moneyType(num) {
      let money = Math.round((num == "" ? 0 : num) * 100) / 100;
      money = money.toFixed(2);
      return (this.ruleForm.sacrificePrice = money);
    },
    resetForm() {
      this.$refs["ruleForm"].resetFields();
      this.ruleForm.sacrificePrice = "";
    }
  }
};
</script>

<style lang="scss" scoped>
.adminConfig{
  .formContent{
    padding:20px
  }
}
</style>
